He intentado adjuntar un evento onchange a este fragmento de código para hacer que la entrada de rango sea dinámica a medida que se desliza, durante más de 2 días, pero parece que nada funciona. Es para una calculadora de tasa de interés y ya no tengo idea de qué hacer.
¿Puede alguien mostrarme cómo hacer que mi control deslizante sea dinámico? He adjuntado los fragmentos de código relevantes a continuación.
Ahora he editado el código por razones de brevedad.
function compute() {
function updateRate(rate) {
var rateval = document.getElementById("rate").value;
document.getElementById("rate_val").innerText = rateval;
}
}
<!DOCTYPE html>
<html>
<head>
<script src="script.js"></script>
<link rel="stylesheet" href="style.css">
<title>Simple Interest Calculator</title>
</head>
<body>
<div class="container">
<h1>Simple Interest Calculator</h1>
<form id="form1">
<label for="Interest Rate"></label> Interest Rate <input type="range" id="rate" min="1" max="20" step="0.25" default value="10.25">10.25%<span id="rate_val">
<br/>
<br/>
</div>
</body>
</html>
Llamando onchange(); en la entrada en el html. y pasando this como un parámetro.
Js: establecer el texto interno de span en event.value event es this pasé desde el html.
Su html también estaba mal: el texto que se suponía que estaba dentro de la etiqueta se colocó después de que finaliza.
el intervalo se abrió pero nunca se cerró y el mismo texto que irá dentro del intervalo se colocó después.
Aplica sangría a tu código después de una nueva etiqueta para crear el hábito de abrir y cerrar etiquetas. Hasta que lo consigas. Buena suerte...
function updateValue(event) {
document.getElementById("rate_val").innerText = event.value;
}
<div class="container">
<h1>Simple Interest Calculator</h1>
<form id="form1">
<label for="Interest Rate">Interest Rate</label>
<input onchange=updateValue(this) type="range" id="rate" min="1" max="20" step="0.25" default value="10.25">
<span id="rate_val">10.25%</span>
</form>
</div>
El código se explica por sí mismo, solo estoy usando el evento de entrada para actualizar la tasa de interés.
const rate = document.getElementById("rate");
function updateInterestRate() {
document.getElementById("rate_val").innerText = rate.value + '%';
}
function initializeSlider() {
updateInterestRate();
rate.addEventListener("input", updateInterestRate)
}
initializeSlider();
<div class="container">
<h1>Simple Interest Calculator</h1>
<form id="form1">
<label for="Interest Rate"></label> Interest Rate <input type="range" id="rate" min="1" max="20" step="0.25" default value="10.25">
<span id="rate_val">10.25%</span>
<br/>
<br/>
</div>